<template>
	<view class="white-list-page">

		<view style="background: #fff;padding-top: 20rpx;">
			<view style="display: flex;align-items: center;padding: 0 25rpx;">
				<view style="display: flex;align-items: center;">
					<u-icon name="calendar" size="60" color="#666"></u-icon>
					<uni-datetime-picker type="date" placeholder="开始日期" class="custom-date-picker" v-model="startDate"
						@change="onStartDateChange" />
				</view>
				<text style="margin: 0 25rpx;">-</text>
				<view style="display: flex;align-items: center;">
					<u-icon name="calendar" size="60" color="#666"></u-icon>
					<uni-datetime-picker type="date" placeholder="结束日期" v-model="endDate" @change="onEndDateChange" />
				</view>
			</view>
			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="search-input">
					<u-icon name="search" size="35" color="#999" class="search-icon"></u-icon>
					<input type="text" placeholder="搜索姓名" v-model="searchKey" @input="getWhiteList()"
						@confirm="searchWhiteList" />
				</view>
				<button class="search-btn" @click="searchOrders">搜索</button>
				<button class="search-btn" @click="exportSimpleWord">导出</button>
			</view>
		</view>
	<view style="padding:0 25rpx; background: #f5f7fa;">
		<u-subsection  :list="list" fontSize="26" :current="current" @change="sectionChange"></u-subsection>
	</view>
		<!-- 状态筛选标签 -->
		<view class="status-tabs">
			<text class="tab-item" :class="{ 'active': currentStatus === status.id }" v-for="(status, index) in tabList"
				:key="index" @click="changeStatus(status)">{{ status.name }}</text>
		</view>

		<!-- 白名单列表 -->
		<view class="white-list">
			<view class="white-item" v-for="(item, index) in whiteList" :key="item.white_id"
				@click="viewDetail(item.white_id)">
				<!-- 基本信息 -->
				<view class="item-header">
					<text class="name">{{ item.real_name }}</text>
					<!-- <text class="status">{{getStatusText(item.status)}}</text> -->
					<!-- 操作按钮 -->
					<view class="item-actions">
						<!-- <button class="action-btn edit-btn" @click.stop="editItem(item)">
							<u-icon name="edit-pen" color="#409EFF" size="36" class="action-icon"></u-icon>
						</button> -->
						<button class="action-btn delete-btn"
							@click.stop="confirmDelete(item.white_id, item.real_name)">
							<u-icon name="trash" color="#fff" size="36" class="action-icon"></u-icon>
						</button>
					</view>
				</view>

				<view class="item-content">
					<view class="info-row">
						<text class="label">姓名：</text>
						<text class="value">{{ item.real_name }}</text>
					</view>
					<view class="info-row">
						<text class="label">身份证号：</text>
						<text class="value">{{ formatIdcard(item.idcard) }}</text>
					</view>
					<view class="info-row">
						<text class="label">创建人：</text>
						<text class="value">{{ item.create_by }}</text>
					</view>
					<view class="info-row">
						<text class="label">卡类型：</text>
						<text class="value">{{ item.type==0?'大递卡':'骑士卡' }}</text>
					</view>
					<view class="info-row">
						<text class="label">有效期：</text>
						<text class="value">{{ formatDate(item.start_date) }} - {{ formatDate(item.end_date) }}</text>
					</view>
					<view class="info-row">
						<text class="label">创建时间：</text>
						<text class="value">{{ formatDate(item.create_time) }}</text>
					</view>

				</view>
				<view class="attachment-preview">
					<view class="preview-title">附件预览</view>
					<view class="attachment-list">
						<view class="attachment-item" v-if="item.idcard_image" @click="previewImage(item.idcard_image)">
							<image :src="item.idcard_image" mode="aspectFill"></image>
							<text>身份证正面</text>
						</view>
						<view class="attachment-item" v-if="item.idcard_image_b"
							@click="previewImage(item.idcard_image_b)">
							<image :src="item.idcard_image_b" mode="aspectFill"></image>
							<text>身份证反面</text>
						</view>

					</view>
				</view>
				<!-- 备注信息 -->
				<view class="remark-section" v-if="item.remark">
					<view class="remark-title">备注信息</view>
					<view class="remark-content">{{ item.remark }}</view>
				</view>


			</view>

			<!-- 无数据状态 -->
			<view class="empty-state" v-if="whiteList.length === 0">
				<image src="/static/images/empty.png" class="empty-icon"></image>
				<text class="empty-text">暂无白名单记录</text>
				<button class="add-btn" @click="addItem">
					<text class="iconfont icon-plus"></text>
					<text>添加白名单</text>
				</button>
			</view>
		</view>


		<!-- 添加/编辑表单弹窗 -->
		<view class="modal" v-if="formVisible">
			<view class="modal-mask" @click="closeForm"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ formType === 'add' ? '添加白名单' : '编辑白名单' }}</text>
					<text class="close-btn" @click="closeForm">×</text>
				</view>

				<view class="modal-body">
					<view class="form-group">
						<view class="form-item">
							<label class="form-label">真实姓名</label>
							<input type="text" class="form-input" v-model="formData.real_name" placeholder="请输入真实姓名" />
						</view>

						<view class="form-item">
							<label class="form-label">身份证号</label>
							<input type="text" class="form-input" v-model="formData.idcard" placeholder="请输入身份证号码" />
						</view>

						<!-- <view class="form-item">
              <label class="form-label">所在城市</label>
              <picker mode="selector" :range="cities" :value="cityIndex" @change="onCityChange">
                <view class="picker-input">
                  {{ cities[cityIndex].name || '请选择城市' }}
                  <text class="iconfont icon-arrowdown"></text>
                </view>
              </picker>
            </view> -->

						<view class="form-item">
							<label class="form-label">开始日期</label>
							<picker mode="date" :value="formData.start_date" start="2020-01-01" end="2030-12-31"
								@change="onStartDateChange">
								<view class="picker-input">
									{{ formData.start_date || '请选择开始日期' }}
									<text class="iconfont icon-arrowdown"></text>
								</view>
							</picker>
						</view>

						<view class="form-item">
							<label class="form-label">结束日期</label>
							<picker mode="date" :value="formData.end_date" start="2020-01-01" end="2030-12-31"
								@change="onEndDateChange">
								<view class="picker-input">
									{{ formData.end_date || '请选择结束日期' }}
									<text class="iconfont icon-arrowdown"></text>
								</view>
							</picker>
						</view>

						<view class="form-item">
							<label class="form-label">身份证正面</label>
							<view class="image-upload" @click="uploadIdcardFront">
								<text v-if="!formData.idcard_image" class="upload-text">点击上传</text>
								<image v-if="formData.idcard_image" :src="formData.idcard_image" mode="aspectFill">
								</image>
							</view>
						</view>

						<view class="form-item">
							<label class="form-label">身份证反面</label>
							<view class="image-upload" @click="uploadIdcardBack">
								<text v-if="!formData.idcard_image_b" class="upload-text">点击上传</text>
								<image v-if="formData.idcard_image_b" :src="formData.idcard_image_b" mode="aspectFill">
								</image>
							</view>
						</view>

						<view class="form-item">
							<label class="form-label">备注信息</label>
							<textarea class="form-textarea" v-model="formData.remark" placeholder="请输入备注信息"
								maxlength="200"></textarea>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<button style="height: 70rpx;" class="cancel-btn" @click="closeForm">取消</button>
					<button style="height: 70rpx;" class="submit-btn" @click="submitForm">保存</button>
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<view class="confirm-modal" v-if="deleteVisible">
			<view class="modal-mask" @click="deleteVisible = false"></view>
			<view class="confirm-content">
				<view class="confirm-text">确定要删除 <text class="highlight">{{ deleteName }}</text> 的白名单记录吗？</view>
				<view class="confirm-actions">
					<button style="display: flex;border-radius: 50rpx; justify-content: center;height: 70rpx;"
						class="action-btn cancel-btn" @click="deleteVisible = false">取消</button>
					<button style="display: flex;border-radius: 50rpx;  justify-content: center;height: 70rpx;"
						class="action-btn delete-btn" @click="handleDelete">确认删除</button>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<view class="spinner"></view>
			<text>加载中...</text>
		</view>

		<!-- 提示消息 -->
		<view class="toast" v-if="toastVisible">
			<text>{{ toastMessage }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面数据
				whiteList: [],
				searchKey: '',
				currentStatus: '',
				statusText: {
					'': '全部',
					'0': '正常',
					'1': '退回'
				},
				cities: [{
						id: '11',
						name: '北京市'
					},
					{
						id: '12',
						name: '天津市'
					},
					{
						id: '31',
						name: '上海市'
					},
					{
						id: '32',
						name: '江苏省'
					},
					{
						id: '33',
						name: '浙江省'
					},
					{
						id: '44',
						name: '广东省'
					},
					{
						id: '42',
						name: '湖北省'
					},
					{
						id: '43',
						name: '湖南省'
					}
				],

				// 表单数据
				formVisible: false,
				formType: 'add',
				formData: {
					white_id: '',
					city_id: '',
					user_id: '',
					real_name: '',
					idcard: '',
					start_date: '',
					end_date: '',
					idcard_image: '',
					idcard_image_b: '',
					status: 0,
					remark: ''
				},
				cityIndex: 0,

				// 删除确认
				deleteVisible: false,
				deleteId: '',
				deleteName: '',

				// 状态控制
				loading: false,
				toastVisible: false,
				toastMessage: '',
				page: 1,
				limit: 10,
				total: 0,
				tabList: [{
						id: '',
						name: '全部'
					},
					{
						id: 0,
						name: '正常'
					},
					{
						id: 1,
						name: '退回'
					},
				],
				startDate: '',
				endDate: '',
				list: [ '大递卡', '骑士卡'],
				current:0,
			}
		},

		computed: {
			// 过滤后的白名单列表
			filteredItems() {
				return this.whiteList.filter(item => {
					// 状态筛选
					if (this.currentStatus !== '') {
						const statusFilter = this.currentStatus === 1 ? 0 : 1;
						if (item.status !== statusFilter) return false;
					}

					// 搜索筛选
					if (this.searchKey) {
						const searchKey = this.searchKey.toLowerCase();
						return item.real_name.toLowerCase().includes(searchKey) ||
							item.idcard.toLowerCase().includes(searchKey);
					}

					return true;
				});
			}
		},

		onLoad() {
			this.getWhiteList();
		},

		methods: {
			sectionChange(index){
				this.current = index
				this.whiteList = []
				this.getWhiteList()
			},
			onStartDateChange(date) {
				console.log('开始日期:', date);
				this.startDate = date
			},

			onEndDateChange(date) {
				console.log('结束日期:', date);
				this.endDate = date
			},
			async exportSimpleWord(data) {
				let params = {
					start_date: this.startDate,
					end_date: this.endDate,
					type:this.current
				}
				let that = this
				
				uni.showLoading({
					title: '正在生成文档'
				})
				const res = await this.$api.post('/Business/exportwhiteoWord', params, true)
				console.log('dadada',res)
				if (res.data.code == 200) {
					let downloadUrl = res.data.url
					uni.showModal({
						content: res.data.filename + '已导出，请点击下载',
						title: res.data.msg,
						confirmText: '复制链接',
						success: (red) => {
							if (red.confirm) {
								this.downloadExcelByUrl(downloadUrl)
								
							}
						}
					})
					uni.hideLoading()
				} else {
					uni.hideLoading()
				}
			},
			downloadExcelByUrl(url){
				uni.downloadFile({
					url:url,
					success: (res) => {
						if(res.statusCode == 200) {
							uni.openDocument({
								filePath:res.tempFilePath,
								fileType:'xlsx',
								success: () => {
									console.log('打开成功')
								}
							})
						}
					}
				})
			  uni.setClipboardData({
				data: url,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				},
				fail: function (err) {
					console.error('复制失败:', err);
					uni.showToast({
						title: '复制失败，请重试',
						icon: 'none'
					});
				}
			});
		  },
			// 预览图片
			previewImage(url) {
				const imageUrl = [url];
				if (imageUrl) {
					uni.previewImage({
						current: imageUrl,
						urls: imageUrl
					});
				}
			},
			async getWhiteList() {
				this.loading = true;
				const params = {
					page: this.page,
					size: this.limit,
					real_name: this.searchKey,
					status: this.currentStatus,
					start_date:this.startDate,
					end_date:this.endDate,
					type:this.current
				}
				const res = await this.$api.get('/Business/whiteList', params, true)
				if (res.data.code === 200) {
					this.total = res.data.total
					this.whiteList = res.data.data
					this.loading = false;
				}
			},
			searchOrders() {
				if(!this.startDate && !this.endDate) {
					this.page = 1;
					this.whiteList = []
					this.getWhiteList();
				}
				if (this.searchKey.trim() || this.startDate || this.endDate) {

					this.page = 1;
					this.whiteList = []
					this.getWhiteList();
				}
			},


			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 切换筛选状态
			changeStatus(status) {
				this.currentStatus = status.id;
				this.getWhiteList()
			},

			// 获取状态文本
			getStatusText(status) {
				return status === 0 ? '正常' : '退回';
			},

			// 获取状态样式
			getStatusClass(status) {
				return status === 0 ? 'status-normal' : 'status-rejected';
			},

			// 获取城市名称
			getCityName(cityId) {
				const city = this.cities.find(c => c.id === cityId);
				return city ? city.name : '未知城市';
			},

			// 格式化身份证号
			formatIdcard(idcard) {
				if (!idcard) return '';
				return idcard.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3');
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				return dateStr.split(' ')[0];
			},

			// 格式化日期时间
			formatDateTime(dateStr) {
				if (!dateStr) return '';
				return dateStr.replace(' ', 'T');
			},

			// 查看详情
			viewDetail(id) {
				uni.navigateTo({
					url: `/pages/white-list/detail?id=${id}`
				});
			},

			// 添加白名单
			addItem() {
				uni.navigateTo({
					url: '/pages/whitelist/addWhitelist/addWhitelist   '
				})
			},

			// 编辑白名单
			editItem(item) {
				this.formType = 'edit';
				this.formData = {
					...item
				};

				// 设置城市索引
				const cityIndex = this.cities.findIndex(c => c.id === item.city_id);
				this.cityIndex = cityIndex !== -1 ? cityIndex : 0;

				this.formVisible = true;
			},

			// 关闭表单
			closeForm() {
				this.formVisible = false;
			},

			// 城市选择变更
			onCityChange(e) {
				this.cityIndex = e.detail.value;
				this.formData.city_id = this.cities[this.cityIndex].id;
			},
			// 上传身份证正面
			uploadIdcardFront() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						// 实际项目中应上传至服务器
						const response = await this.$api.uploadFile('/Upload/File', res.tempFilePaths[0])
						if (response.code == 200) {
							this.formData.idcard_image = response.url
						}
					}
				});
			},

			// 上传身份证反面
			uploadIdcardBack() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const response = await this.$api.uploadFile('/Upload/File', res.tempFilePaths[0])
						if (response.code == 200) {
							this.formData.idcard_image_b = response.url
						}
					}
				});
			},

			// 提交表单
			async submitForm() {
				// 表单验证
				if (!this.formData.real_name) {
					this.showToast('请输入真实姓名');
					return;
				}

				if (!this.formData.idcard) {
					this.showToast('请输入身份证号');
					return;
				}

				if (!this.formData.start_date || !this.formData.end_date) {
					this.showToast('请选择有效期');
					return;
				}

				if (!this.formData.idcard_image || !this.formData.idcard_image_b) {
					this.showToast('请上传身份证正反面照片');
					return;
				}
				this.loading = true;
				// 模拟提交
				const res = await this.$api.post('/Business/whiteEdit', this.formData, true)
				if (res.data.code === 200) {
					this.getWhiteList()
					this.loading = false;
					this.formVisible = false
				}

			},

			// 确认删除
			confirmDelete(id, name) {
				this.deleteId = id;
				this.deleteName = name;
				this.deleteVisible = true;
			},

			// 处理删除
			async handleDelete() {
				this.loading = true;
				const index = this.whiteList.findIndex(item => item.white_id === this.deleteId);
				const res = await this.$api.post('/Business/whiteDetele', {
					white_id: this.deleteId
				}, true)
				if (res.data.code === 200) {
					this.loading = false;
					this.deleteVisible = false
					this.getWhiteList()
					this.whiteList.splice(index, 1);
					this.showToast('删除成功');

				}

			},

			// 搜索白名单
			searchWhiteList() {
				// 已在计算属性中实现筛选
				this.page = 1
				this.getWhiteList()
			},

			// 切换筛选面板
			toggleFilter() {
				uni.showToast({
					title: '筛选功能待实现',
					icon: 'none'
				});
			},

			// 显示提示
			showToast(message) {
				this.toastMessage = message;
				this.toastVisible = true;

				setTimeout(() => {
					this.toastVisible = false;
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	.attachment-preview {
		padding: 24rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.preview-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.attachment-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.attachment-item {
		width: calc(49% - 10.66rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 12rpx;
		box-sizing: border-box;
	}

	.attachment-item image {
		width: 100%;
		height: 160rpx;
		border-radius: 8rpx;
		margin-bottom: 8rpx;
	}

	.attachment-item text {
		font-size: 24rpx;
		color: #666;
	}

	.remark-section {
		padding: 24rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.remark-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.remark-content {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
		background-color: #f9f9f9;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	/* 基础样式 */
	.white-list-page {
		background-color: #f7f8fa;
		min-height: 100vh;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background: linear-gradient(90deg, #165DFF, #367CFF);
		color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.back-btn,
	.filter-btn {
		font-size: 36rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 24rpx 30rpx;
		background-color: #fff;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 72rpx;
		background-color: #f5f7fa;
		border-radius: 36rpx;
		padding: 0 30rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.search-input input {
		flex: 1;
		height: 72rpx;
		font-size: 28rpx;
		background-color: transparent;
		border: none;
		outline: none;
	}

	/* 状态标签 */
	.status-tabs {
		display: flex;
		background-color: #fff;
		padding: 24rpx 0;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		padding: 12rpx 0;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #165DFF;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #165DFF;
		border-radius: 2rpx;
	}

	/* 白名单列表 */
	.white-list {
		padding: 0 30rpx;
	}

	.search-btn {
		width: 160rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background-color: #007bff;
		color: #fff;
		border-radius: 36rpx;
		margin-left: 24rpx;
		font-size: 28rpx;
		border: none;
		padding: 0;
	}

	.white-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 16rpx;
	}

	.status-normal {
		background-color: #e8f3ff;
		color: #165DFF;
	}

	.status-rejected {
		background-color: #ffebee;
		color: #f44336;
	}

	.item-content {
		padding: 30rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 26rpx;
		color: #666;
		width: 160rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.item-actions {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-btn {
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		border-radius: 25rpx;
		border: none;
	}

	.edit-btn {
		background-color: #e8f3ff;
		color: #165DFF;
	}

	.delete-btn {
		background-color: #ffebee;
		color: #f44336;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 160rpx 0;
	}

	.empty-icon {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240rpx;
		height: 80rpx;
		background-color: #165DFF;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	/* 底部浮动按钮 */
	.float-btn {
		position: fixed;
		right: 40rpx;
		bottom: 60rpx;
		width: 96rpx;
		height: 96rpx;
		background-color: #165DFF;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48rpx;
		box-shadow: 0 8rpx 24rpx rgba(22, 93, 255, 0.3);
	}

	/* 弹窗 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		max-height: 80vh;
		overflow-y: auto;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 40rpx;
		color: #999;
	}

	.modal-body {
		padding: 30rpx;
	}

	.form-group {
		margin-bottom: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.form-input,
	.picker-input {
		width: 100%;
		height: 96rpx;
		background-color: #f5f7fa;
		border-radius: 16rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.picker-input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-textarea {
		width: 100%;
		min-height: 160rpx;
		background-color: #f5f7fa;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		line-height: 1.5;
	}

	.image-upload {
		width: 100%;
		height: 300rpx;
		background-color: #f5f7fa;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.image-upload image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.upload-text {
		font-size: 28rpx;
		color: #999;
	}

	.modal-footer {
		display: flex;
		padding: 30rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.modal-footer button {
		flex: 1;
		height: 96rpx;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.cancel-btn {
		background-color: #f5f7fa;
		color: #666;
		margin-right: 20rpx;
	}

	.submit-btn {
		background-color: #165DFF;
		color: #fff;
	}

	/* 删除确认弹窗 */
	.confirm-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 101;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.confirm-content {
		background-color: #fff;
		border-radius: 32rpx;
		z-index: 150;
		width: 80%;
		max-width: 600rpx;
		padding: 60rpx 40rpx;
		text-align: center;
	}

	.confirm-icon {
		font-size: 100rpx;
		color: #ff9800;
		margin-bottom: 40rpx;
	}

	.confirm-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 60rpx;
		line-height: 1.5;
	}

	.highlight {
		color: #f44336;
		font-weight: bold;
	}




	.delete-btn {
		background-color: #f44336;
		color: #fff;
	}

	/* 加载中 */
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 102;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.spinner {
		width: 80rpx;
		height: 80rpx;
		border: 8rpx solid #f3f3f3;
		border-top: 8rpx solid #165DFF;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 提示消息 */
	.toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 24rpx 48rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		z-index: 103;
		max-width: 80%;
		text-align: center;
	}
</style>